<template lang="pug">
el-select(v-model="value")
  el-option(v-for="(item,index) in colors" :key="index" :value="item.value" :label="item.label")
    el-tag(:color="item.value" style="margin-right: 8px" size="small")
    span {{ item.label }}
</template>

<script setup lang="ts">
import { useApi } from "@scmt/core-api";
import { useRequest } from "@scmt/common-hooks";
const $api = useApi();
const value = defineModel();
const { request, data } = useRequest({
  tubeColor: () => {
    return $api.dict.item.listAsOptions("tube_color");
  },
});

onMounted(() => {
  request("tubeColor");
});

const colors = computed(() => {
  return data?.tubeColor;
});
</script>

<style lang="less" scoped></style>
